<template>
  <div>
    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell
          v-for="(item, accountName) in listData"
          clickable
          :key="accountName"
          :title="` ${item.name}`"
          @click="toggle(accountName)"
        >
          <template #right-icon>
            <van-checkbox
              shape="square"
              checked-color="#2471CA"
              :name="item.accountName"
              ref="checkboxes"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <div class="draw_button">
      <van-button type="default" @click="closeIreceive">取消</van-button>
      <van-button type="info" class="affirm" @click="childClick" color="#2471ca" 
        >确定</van-button
      >
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  props: {
    lliablepersonsUser: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      listData: [],
      result: [],
    };
  },
  created() {
    this.listData = this.lliablepersonsUser;
  },
  watch: {
    lliablepersonsUser() {
      this.result = [];
      this.listData = this.lliablepersonsUser;
    },
    result(newval,old){
      this.result = newval
    }
  },
  methods: {
    toggle(account) {
      this.$refs.checkboxes[account].toggle();
    },
    childClick() {
        if(this.result.length === 0){
          Toast('请选择');
        }else{
          this.$emit("childByValue", this.result);
        }
      
    },
    closeIreceive(){
        this.$emit("closeIreceive");
    }
  },
};
</script>
<style lang="scss" scoped>
.draw_button {
  position: fixed;
  bottom: 0;
}
</style>